Tìm hiểu về Typescript!

#Vietnamese Blog

DOAN NGUYEN PHUONGNGHI

2020.09.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Chào mọi người, lại là Nghi đây! Chắc hẳn các bạn không lạ khi nghe đến cụm từ "Javascript" rồi đúng không nào, Vậy thì hôm nay Nghi sẽ giới thiệu cho các bạn một ngôn ngữ xịn sò hơn được cải tiến từ Javascript với thêm nhiều công nghệ mới nhé!

Cùng check thông tin của nhân vật "Typescript" này ngay nha!?

Typescript là gì ?

Đầu tiên, chúng ta cùng đến với trang chủ thông tin của Typescript nhé!

Với slogan "Typed Javascript at Any Scale" là bạn đã hiểu phần nào về sự mạnh mẽ của Typescript sau khi được cải tiến từ Javascript rồi!

By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.- "Với kiến thức đã có với JavaScript, TypeScript sẽ giúp bạn tiết kiệm thời gian trong quá trình tìm lỗi và cung cấp các bản sửa lỗi trước khi bạn thực thi code."

Vậy nhờ đâu Typescript có thể mang lại năng suất đó , cùng đến với các thông tin cơ bản của Typescript nhé!

TypeScript là một ngôn ngữ lập trình với mã nguồn mở, được phát triển và duy trì bởi tập đoàn Microsoft nổi tiếng và uy tín.
Xuất hiện lần đầu vào 1/10/2012, phiên bản mới nhất hiện nay là 4.0.3 được release cách đây chỉ mới 10 ngày (18/09/2020).
Thay đổi cách thức khai báo biến với hình thức khai báo chặt chẽ và rõ ràng hơn bởi việc bổ sung tùy chọn kiểu tĩnh(static typing) và lớp hướng đối tượng mà điều này không có ở Javascript
có thể sử dụng để phát triển các ứng dụng chạy ở cả client-side ( với Angular) và server-side ( với NodeJS).

Vì sao Typescript được đón nhận mạnh mẽ dù đã có một số thư viện như CoffeScript và Dart được phát triển bởi Google?

Không mất phí: vì Typescript là mã nguồn mở được phát triển từ Javascript, qua đó hỗ trợ các tính năng của Javascript phiên bản mới nhất với cú pháp quen thuộc nhưng đơn giản hơn
Tiện lợi: Bản chất của Typescript vẫn là Javascript - TypeScript được biên dịch tạo ra các đoạn mã javascript nên bạn có thể chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript. Ngoài ra bạn có thể sáng tạo trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn so với một số thư viện sử dụng ngôn ngữ mới hoàn toàn.
Giúp chúng ta phát triển các dự án lớn một cách dễ dàng, cho đến hiện tại, có khá nhiều Javascript Framework khuyến khích sử dụng Typescript. Ví dụ: AngularJS, Ionic ...
TypeScript cung cấp cho chúng ta tất cả các lợi ích của ES6 (ECMAScript 6), cộng với năng suất cao hơn, mã TypeScript có thể được biên dịch theo tiêu chuẩn ES5 và ES6 để hỗ trợ trình duyệt mới nhất.
tiết kiệm thời gian cho các nhà phát triển
TypeScript có thể linh động trên tất cả các trình duyệt, thiết bị và các hệ điều hành. Nó có thể chạy trên mọi môi trường mà JavaScript chạy mà TypeScript không cần một VM chuyên dụng hoặc môi trường thời gian chạy cụ thể để thực thi code.

Các tính năng bổ sung:

Chức năng với các tham số tùy chọn.
Hàm với tham số REST.
Hỗ trợ chung.
Hỗ trợ các Mô-đun( việc tổ chức các lớp và giao diện để duy trì tốt hơn hiệu năng , Một mô-đun được ví như một thùng chứa code của bạn, và nó giúp bạn sắp xếp code của mình một cách gọn gàng, dễ kiểm tra)

Code mẫu: chúng ta cùng xem qua đoạn code của Javascript và Typescript để quan sát sự khác biệt nhé:

Đây là đoạn code từ Javascript:

Và khi hiển thị bằng Typescript, đoạn code trở nên rõ ràng và dễ quan sát hơn như sau:

Chú ý: TypeScript không cho phép xen kẽ các giá trị với các kiểu dữ liệu khác nhau. Khi những hạn chế đó bị vi phạm, trình báo lỗi sẽ đưa thông tin về lỗi. Do đó, bạn phải xác định kiểu biến khi khai báo biến và bạn không thể gán các giá trị khác ngoài loại biến đã khai báo, ví dụ:

Đó là một số thông tin chung về Typescript! Và tiếp theo chúng ta sẽ tìm hiểu thêm thông tin về Typescript qua trang Web chính thức của Typescript và cách cài đặt nhé!

Một số đối tượng trong Typescript và cách thức khai báo cơ bản

Các bạn có thể tra cứu thêm thông tin tại đây!

Biến

Như mình đã nói ở trên thì bản chất của Typescript vẫn là Javascript nên các kiểu dữ liệu cơ bản của java script thì Typescript đều tích hợp đủ, và về phần cải tiến, Typescript còn có một số kiểu đữ liệu khác như là enum, tuple, any, void,... cùng tìm hiểu ngay nhé!

QUAN TRỌNG: cú pháp khai báo biến trong Typescript hơi khác một chút : khi khai báo ,chúng ta cần khai báo thêm cho nó xem là thuộc kiểu dữ liệu nào!

Ví dụ về khai báo các biến trong Javascript dưới dạng Typescript:

STRING:

var string1 : string;

string1 = '1001';

console.log(string1);

BOOLEAN:

var boolean1 : boolean = true;

console.log(boolean1);

NUMBER:

var number1 : number = 28;

console.log(number1);

ARRAY(STRING):

var arrString : string[];

arrString = ['THIS', 'IS','ARRAY'];

console.log(arrString[0]);

ARRAY(NUMBER):

var arrNumber : number[];

arrNumber = [1, 2, 3];

console.log(arrNumber[1]);

ENUM: dùng để khai báo một kiểu liệt kê (Enumeration). Kiểu liệt kê là một tập hợp các hằng số do người dùng tự định nghĩa

enum Color

{ Red,

Green,

Blue, }

let c: Color = Color.Green;

TUPLE: một mảng hỗn tạp nhưng đã được khai báo số phần tử

var x: [string, number];

x = ['EXAMPLE FOR TUPLE', 10];

for (let i = 0; i < x.length; i++)

{ console.log(x[i]); } console.log(x[0]);

Các bạn tham khảo thêm các kiểu dữ liệu ở đây nhé!

Function ( Hàm)

Chú ý:

Các hàm đều sẽ trả về một kết quả tuỳ thuộc vào kiểu dữ liệu đã khai báo!
Phải chỉ định luôn kiểu dữ liệu trả về cho hàm ngay từ đầu

Ví dụ:

function showString() : string {

return 'hello';

}

5 phút cài đặt!

Có hai cách chính để cài đặt Typescript:

Thông qua nmp(trình quản lý gói Node.js)

npm install -g typescript

Cài đặt các plugin Visual Studio của TypeScript( Visual Studio 2017 và Visual Studio 2015 Update 3 được tích hợp mặc định TypeScript)

Cám ơn các bạn đã theo dõi

Hiện nay thông tin về Typescript có thể dễ dàng tìm kiếm ở trên Internet, các bạn có thể tham khảo thêm, hoặc tham khảo từ trang Web chính thức của Typescript vừa luyện tiếng Anh vừa hiểu rõ hơn về món "Typescript" này nhé!

Mong là bài viết của Nghi đã tổng hợp được những nội dung cơ bản về Typescript cho mọi người có cái nhìn khái quát trước mắt , trước khi chuyên sâu và chuyển đổi từ Javascript đơn thuần sang Typescript cải tiến nha!

Chào tạm biệttttttttt~~~~!!!!!!! またね〜！?